const searchBar = document.querySelector("#search-books input");
searchBar.addEventListener("keyup", (event) => {
	console.log(event)
	console.log(event.target.value)
});

const addForm = document.querySelector("form#add-book");

addForm.addEventListener("submit", (e)=>{
	//拦截表单提交行为
    e.preventDefault();
    
    //获取输入框对象，在 addForm 对象中找 input
    //bookInputEle = document.querySelector("form input[type='text']");
    const bookInputEle = addForm.querySelector("input[type='text']");
    	
	//获取输入框内容
    const bookName = bookInputEle.value
    console.log("输入的书名是：", bookName)
})
const hideBox = document.querySelector("#hide");

//捕捉 change 单选框状态改变事件
hideBox.addEventListener("change", ()=> {
    //获取单选框状态值
    console.log("勾选了隐藏所有书籍", hideBox.checked)
});
const tab_btn = document.querySelectorAll(".tab-buttons li");
//在页面上找到 tab 
const tab_buttons = document.querySelector(".tab-buttons");
//在页面上找到 两个显示内容
const tab_contents = document.querySelectorAll(".tab-content");

// 给 tab添加点击事件监听，如果 tab的内容被点击了，会这个函数
tab_buttons.addEventListener("click", (event) => {
    //点击的元素是 li 
    if (event.target.tagName == "LI") {
        // 切换tab 页面的 active 状态
        tab_lis.forEach((i) => i.classList.toggle("active"));
    }
});
tab_buttons.addEventListener("click", (e) => {

    //点击的元素是 li 
    if (e.target.tagName == "LI") {
        // 切换tab 页面的 active 状态
        tab_btn.forEach((i) => i.classList.toggle("active"));

        //获取当前被点击的关联的是哪块内容
        const target_content = document.querySelector(e.target.dataset.target);

        //循环所有展示容器
        Array.from(tab_contents).forEach((content) => {
            //展示容器和点击查询出来的容器相符，添加 active 状态
            //不是则移除 active 状态
            if (content == target_content) {
                content.classList.add("active");
            } else {
                content.classList.remove("active");
            }
        });
    }
});